<template>
  <el-dropdown trigger="click" @command="handleSetSize" class="el-menu-size">
    <div>
      <svg-icon class-name="size-icon" icon-class="size" />
      <span>字体大小</span>
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value"
        :command="item.value">{{item.label }}</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
  export default {
    data() {
      return {
        sizeOptions: [{
            label: " 默认 ",
            value: "default"
          },
          {
            label: " 中等 ",
            value: "medium"
          },
          {
            label: " 小号 ",
            value: "small"
          },
          {
            label: " 迷你 ",
            value: "mini"
          },
        ],
      };
    },
    computed: {
      size() {
        return this.$store.getters.size;
      },
    },
    methods: {
      handleSetSize(size) {
        this.$ELEMENT.size = size;
        this.$store.dispatch("app/setSize", size);
        this.refreshView();
        this.$message({
          message: "切换成功",
          type: "success",
        });
      },
      refreshView() {
        // In order to make the cached page re-rendered
        this.$store.dispatch("tagsView/delAllCachedViews", this.$route);

        const {
          fullPath
        } = this.$route;

        this.$nextTick(() => {
          this.$router.replace({
            path: "/redirect" + fullPath,
          });
        });
      },
    },
  };

</script>
<style scoped>
  .el-popper {
    left: 90px !important;
    top: inherit !important;
    bottom: 35px;
  }

</style>
